<template>
    <div id="Waybill">
        <el-card>
            <el-row>
                <el-col :span="12">
                    <el-input type="textarea" :rows="3" placeholder="请输入运单号" v-model="textarea"></el-input>
                </el-col>
            </el-row>
            <el-row>
                <el-button :disabled="textarea == ''" type="primary" class="btn btn-primary" @click="Search">查询
                </el-button>
            </el-row>
            <!-- <el-table :data="data" style="width: 95%">
            <el-table-column prop="id" label="单号" width="180">
            </el-table-column>
            <el-table-column prop="commit_time" label="下单时间" width="180">
            </el-table-column>
            <el-table-column prop="arrival_time" label="发货时间" width="180">
            </el-table-column>
            <el-table-column prop="sign_time" label="入站时间" width="180">
            </el-table-column>
            <el-table-column prop="receipt_time" label="签收时间" width="180">
            </el-table-column>
            <el-table-column prop="arrival_state" label="货件状态" width="180">
            </el-table-column>
        </el-table> -->
            <el-card class="index_card" v-show="Object.keys(data).length > 2">
                <div class="block">
                    <el-timeline>
                        <el-timeline-item :timestamp="data.commit_time" placement="top">
                            <el-card>
                                <h4>提交订单</h4>
                                <p> 用户{{ data.send_name }}提交于{{ data.commit_time }}</p>
                            </el-card>
                        </el-timeline-item>
                        <el-timeline-item :timestamp="data.sign_time" placement="top" v-if="data.sign_time">
                            <el-card>
                                <h4>已发货</h4>
                                <p>发货时间{{ data.sign_time }}</p>
                            </el-card>
                        </el-timeline-item>
                        <el-timeline-item :timestamp="data.arrival_time" placement="top" v-if="data.arrival_time">
                            <el-card>
                                <h4>已入站</h4>
                                <p>入站时间{{ data.sign_time }}</p>
                            </el-card>
                        </el-timeline-item>
                        <el-timeline-item :timestamp="data.receipt_time" placement="top" v-if="data.receipt_time">
                            <el-card>
                                <h4>已签收</h4>
                                <p>签收时间{{ data.receipt_time }}</p>
                            </el-card>
                        </el-timeline-item>
                        <el-timeline-item>
                            <el-card>
                                <h4>运单状态</h4>
                                <p>{{ data.arrival_state }}</p>
                            </el-card>
                        </el-timeline-item>
                    </el-timeline>
                </div>
            </el-card>
        </el-card>
    </div>
</template>

<script>
export default {
    name: "Waybill",
    data() {
        return {
            show: false,
            textarea: "",
            data: {}
        }
    },
    watch: {},
    methods: {
        async Search() {
            this.data = {}
            try {
                let { data: res } = await this.$API.reqWaybill(this.textarea)
                console.log(typeof (res));
                if (typeof res === "string") {
                    this.$message.warning('无此订单信息')
                } else {
                    console.log(res);
                    this.data = res
                }
            } catch (error) {
                console.log("sad");
            }
        }
    },
}
</script>

<style lang="scss" scoped>
#Waybill {
    width: 70%;
    margin: 0 auto;
    .el-card{
        height: 800px;
    }
}

.el-row {
    margin: 20px;
}

.index_card {
    margin: 30px auto;
    width: 60%;
}
</style>